<template>
	<view>
		<view class="addFriendWarp">
			<input type="text" placeholder="请输入用户名!" class="userInput" v-model:value="user" @change="search">
			<button type="primary" @tap="search">搜索</button>
		</view>
		<view class="contents" v-if="userList.length > 0">
		<h4>查询结果</h4>
			<view class="item" v-for="(v,o) in userList" :key="o" @tap="">
				<span>{{ v.user || v }}</span>
				<button v-if="v.user" type="primary" @tap="addFriend(v)">添加</button>
			</view>
		</view>
		<view class="contents">
		<view class="" style="display: flex;justify-content: space-between;" @tap="newsData">
			<h4>消息中心</h4>
			<span style="width: 50rpx;height: 50rpx;border-radius: 50%;
			background-color: #2F80ED;text-align: center;line-height: 50rpx;"  v-if="friendFeedBack.length > 0">{{friendFeedBack.length}}</span
			>
		</view>
			<view class="item" v-for="(v,o) in friendFeedBack" :key="o+'..'" v-show="showNewsss"  v-if="friendFeedBack.length > 0">
				<span>{{ v.fsend === 0 ? `${v.fuser}拒绝添加好友！` : `${v.fuser}已同意添加为好友！` }}</span>
				<button type="warn" size="mini" @tap="reReads(v.fid)">标为已读</button>
			</view>
			<view class="" v-else>
				<span>暂无消息！</span>
			</view>
		</view>
		<view class="list" v-if="resFriend.length > 0">
			<h4>请求添加为好友</h4>
			<view class="itemList" v-for="(item,index) in resFriend" :key="item.fid" v-if="resFriend.length > 0">
				<span>{{ item.fme }}</span>
				<view class="">
					<button type="warn" size="mini" @tap="reply(item,0)">拒绝</button>
					<button type="primary" size="mini" @tap="reply(item,1)">同意</button>
				</view>
			</view>
		</view>
		<view class="list">
			<h4>好友列表</h4>
			<view class="itemList" v-for="(item,index) in friendList" :key="index+'_'" v-if="friendList.length > 0">
				<span>{{ item.fuser }}</span>
				<button type="warn" size="mini" @tap="remind(item,0)" v-if="news.length > 0">未读消息</button>
				<button type="primary" size="mini" @tap="remind(item,1)" v-else>提醒签到</button>
			</view>
		</view>
		<view class="fixBox" v-if="showNews">
			<h3 style="text-align: center;padding: 20rpx;background: linear-gradient(to top, #56CCF2,#2F80ED); border-radius: 0rpx 0rpx 50rpx 50rpx;color: #fff;">未读信息</h3>
			<view class="itemList" v-for="(v,o) in news" :key="v.id" v-if="news.length > 0">
			<view class="">
				<h4>{{v.muser}}<span>提醒你签到</span></h4>
				<span style="color: #cda2a2">{{v.times}}</span>
			</view>
				<button size="mini" type="primary" @tap="cancalChat(v)">取消提醒</button>
			</view>
			<view class="closed" @tap="closed">
				X
			</view>
		</view>
	</view>
</template>

<script>
	import { searchUser, addFriend , selectFriend, chatSend,selectChat,updateChat,selectFRes,agreeRes,RefuseRes,feedback,reRead} from "@/api/index.js"
	// import { sendData } from "@/utils/socket.js"
	export default {
		data() {
			return {
				user: '',
				userList: [],
				friendList: [],
				news: [],
				showNews: false,
				resFriend: [],
				friendFeedBack: [],
				showNewsss: false
			}
		},
		watch: {
			user: {
				handler(o,v){
					if(o === '') {
						this.userList = []
						return
					}
					if(o !== v) {
						this.search()
					}
				}
			}
		},
		onShow() {
			this.selectFriends()
			this.selectChats()
			this.selectFRess()
			this.feedbacks()
		},
		methods: {
			async search(){
				this.userList = []
				let res = await searchUser({user: this.user});
				if(!!res){
					if(res.data.code === 1000) {
						this.userList = res.data.data
					} else {
						this.userList.push(res.data.data)
					}
				}
			},
			async addFriend(data){
				console.log(data);
				let me = uni.getStorageSync("users");
				data.me = me
				let res = await addFriend(data);
				// console.log(res);
				this.selectFriends()
			},
			async selectFriends(){
				let user = uni.getStorageSync("users")
				let res = await selectFriend({user})
				if(!!res.data.data && res.data.code === 1000){
					this.friendList = res.data.data
				}
			},
			async remind(data,index) {
				if(index === 0) {
					this.showNews = true
				} else if(index === 1) {
					await chatSend(data)
				}
				console.log(data);
			},
			async reply(data,index) {
				if(index === 0){
					let res = await RefuseRes({id:data.fid})
				} else if(index === 1){
					let temp = {
						id: data.fid,
						fme: data.fuser,
						fuser: data.fme
						}
					let ress = await agreeRes(temp)
					if(ress.data.code === 1000) {
						this.selectFriends()
					}
				}
				this.tempdata(data)
			},
			tempdata(data){
				let index = this.resFriend.findIndex(item => item.id === data.fid);
				console.log(index,'indexxxxxxxxxxxxxxxx');
				this.resFriend.splice(index,1)
			},
			async feedbacks(){
				let user = uni.getStorageSync("users")
				let res = await feedback({user});
				if(res.data.code === 1000){
					// this.friendFeedBack = res.data.data
					this.friendFeedBack = res.data.data.filter(item => item.status !== 1)
					console.log(this.friendFeedBack,'this.friendFeedBack');
				}
			},
			async selectChats() {
				let user = uni.getStorageSync("users")
				let res = await selectChat({user})
				if(res.data && res.data.code === 1000){
					this.news = res.data.data
					this.news.forEach(item => {
						let tempTime = new Date(item.times)
						item.times = tempTime.getFullYear() +"-"+ (tempTime.getMonth()+1) +"-"+ tempTime.getDate() + ' ' + tempTime.getHours() +":"+ tempTime.getMinutes()
					})
				}
			},
			closed() {
				this.showNews = false
				this.selectChats()
			},
			async cancalChat(data) {
				let res = await updateChat({id: data.id})
				if(res && res.data.code === 1000) {
					let index = this.news.findIndex(item => item.id = data.id)
					this.news.splice(index,1)
				}
			},
			async selectFRess() {
				let user = uni.getStorageSync("users")
				let res = await selectFRes({user});
				if(!!res.data.data) {
					this.resFriend = res.data.data
					console.log(this.resFriend,'this.resFriend');
				}
			},
			newsData(){
				this.showNewsss = !this.showNewsss
			},
			async reReads(data){
				let res = await reRead({id:data});
				if(res.data.code === 1000){
					let index = this.friendFeedBack.findIndex(item => item.fid === data)
					this.friendFeedBack.splice(index,1)
					this.$delete(this.friendFeedBack,index)
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: aliceblue;
	}
	.addFriendWarp {
		display: flex;
		padding: 20rpx;
	}
.userInput {
	flex: 1;
	padding: 20rpx;
	background-color: #fff;
}
.contents {
	margin: 20rpx;
	padding: 20rpx;
	background-color: #fff;
}
.item {
	color: #98bfb2;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.item span {
	flex: 1;
}
.list {
	padding: 20rpx;
}
.itemList {
	padding: 40rpx 20rpx;
	background-color: #fff;
	margin: 10rpx 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.itemList button {
	margin-right: 0 !important;
}
.fixBox {
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, .5);
	position: fixed;
	top: 0;
	z-index: 999;
	overflow-y: auto;
}
.closed {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	border: 1px solid #fff;
	background-color: rgba(0, 0, 0, .5);
	color: #fff;
	font-size: 1.2rem;
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	text-align: center;
	line-height: 80rpx;
	
}
</style>
